<script setup>
  import { ref, onMounted } from 'vue'
  import taskApi from '@/apis/task.js'
  // 1.定义一个响应式对象将数据绑定到视图上（根据接口判定是数组）
  const deliveryList = ref([])
  // 2.页面加载的时候请求服务器获取数据

  onMounted(() => {
    getDeliveryList()
  })
  // status=2表示获取在途和交付的任务单
  async function getDeliveryList(page = 1, pageSize = 1, status = 2) {
    let { code, msg, data } = await taskApi.tasklist(page, pageSize, status)
    if (code !== 200) {
      return uni.utils.toast(msg)
    }
    deliveryList.value = data.items
    console.log(data.items)
  }
</script>
<template>
  <scroll-view scroll-y refresher-enabled class="scroll-view">
    <view class="scroll-view-wrapper">
      <view
        class="task-card"
        v-for="delivery in deliveryList"
        :key="delivery.id"
      >
        <navigator
          hover-class="none"
          :url="`/subpkg_task/detail/index?id=${delivery.id}`"
        >
          <view class="header">
            <text class="no">任务编号: {{ delivery.transportTaskId }}</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line">{{ delivery.startAddress }}</view>
              <view class="line">{{ delivery.endAddress }}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">{{ delivery.planArrivalTime }}</view>
          <navigator
            hover-class="none"
            :url="`/subpkg_task/delivery/index?id=${delivery.id}`"
            class="action"
          >
            交付
          </navigator>
        </view>
      </view>

      <view v-if="false" class="task-blank">无在途货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
